<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<!--  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> -->
</head>
<body>
  <div>
      <div class="ui small basic icon buttons">
          <button class="ui button"><i class="file icon"></i></button>
          <button class="ui button"><i class="save icon"></i></button>
          <button class="ui button"><i class="upload icon"></i></button>
          <button class="ui button"><i class="download icon"></i></button>
      </div>
  </div>

  <div class="blue ui buttons">
      <button class="ui button">One</button>
      <button class="ui button">Two</button>
      <button class="ui button">Three</button>
  </div>
  <div>
      <div class="ui buttons">
          <button class="ui labeled icon button"><i class="left chevron icon"></i> Back </button>
          <button class="ui button"><i class="stop icon"></i> Stop </button>
          <button class="ui right labeled icon button">Forward <i class="right chevron icon"></i> </button>
        </div>    
  </div>
  <div>
      <div class="ui icon buttons">
          <button class="ui button">
            <i class="play icon"></i>
          </button>
          <button class="ui button">
            <i class="pause icon"></i>
          </button>
          <button class="ui button">
            <i class="shuffle icon"></i>
          </button>
        </div>    
  </div>
  <div>
      <div class="ui vertical buttons">
          <button class="ui button">动态</button>
          <button class="ui button">Messages</button>
          <button class="ui button">Events</button>
          <button class="ui button">Photos</button>
        </div>    
  </div>
  <div>      
    <button class="circular ui icon button">
      <i class="icon settings"></i>
    </button>
  </div>
  <div>
      <button class="fluid ui button">适应容器</button>

  </div>
  <div>
      <button class="ui toggle button">投票</button>    
  </div>
  <div>
      <button class="ui red button">Red</button>
      <button class="ui orange button">Orange</button>
      <button class="ui yellow button">黄色</button>
      <button class="ui olive button">Olive</button>
      <button class="ui green button">Green</button>
      <button class="ui teal button">Teal</button>
      <button class="ui blue button">Blue</button>
      <button class="ui violet button">紫罗兰色</button>
      <button class="ui purple button">紫色</button>
      <button class="ui pink button">粉色</button>
      <button class="ui brown button">褐色</button>
      <button class="ui grey button">灰色</button>
      <button class="ui black button">Black</button>    
  </div>
  <div>
      <button class="ui right floated button">Right Floated</button>
      <button class="ui left floated button">Left Floated</button>
  </div>

  <div>
      <button class="mini ui button">Mini </button>
      <button class="tiny ui button">Tiny </button>
      <button class="small ui button">Small </button>
      <button class="medium ui button">Medium </button>
      <button class="large ui button">Large </button>
      <button class="big ui button">Big </button>
      <button class="huge ui button">巨大 </button>
      <button class="massive ui button">Massive </button>    
  </div>
  <div>
      <button class="ui facebook button"><i class="facebook icon"></i> Facebook </button>
      <button class="ui twitter button"><i class="twitter icon"></i> Twitter </button>
      <button class="ui google plus button"><i class="google plus icon"></i> Google Plus </button>
      <button class="ui vk button"><i class="vk icon"></i> VK </button>
      <button class="ui linkedin button"><i class="linkedin icon"></i> LinkedIn </button>
      <button class="ui instagram button"><i class="instagram icon"></i> Instagram </button>
      <button class="ui youtube button"><i class="youtube icon"></i> YouTube </button>    
  </div>
  <div>
      <button class="ui loading button">加载</button>
      <button class="ui basic loading button">加载</button>
      <button class="ui primary loading button">加载</button>
      <button class="ui secondary loading button">加载</button>    
  </div>
  <div>
      <div class="ui icon buttons">
          <button class="ui button"><i class="align left icon"></i></button>
          <button class="ui button"><i class="align center icon"></i></button>
          <button class="ui button"><i class="align right icon"></i></button>
          <button class="ui button"><i class="align justify icon"></i></button>
        </div>
        <div class="ui icon buttons">
          <button class="ui button"><i class="bold icon"></i></button>
          <button class="ui button"><i class="underline icon"></i></button>
          <button class="ui button"><i class="text width icon"></i></button>
        </div>
  </div>
  <div>
      <div class="ui labeled button" tabindex="0">
          <div class="ui button"><i class="heart icon"></i> Like </div>
          <a class="ui basic label">
            2,048
          </a>
        </div>
        <div class="ui left labeled button" tabindex="0">
          <a class="ui basic right pointing label">
            2,048
          </a>
          <div class="ui button"><i class="heart icon"></i> Like </div>
        </div>
        <div class="ui left labeled button" tabindex="0">
          <a class="ui basic label">
            1,048
          </a>
          <div class="ui icon button">
            <i class="fork icon"></i>
          </div>
        </div>    
  </div>
  <div>
    <div class="ui animated button" tabindex="0">
        <div class="visible content">Next</div>
        <div class="hidden content">
          <i class="right arrow icon"></i>
        </div>
      </div>
      <div class="ui vertical animated button" tabindex="0">
        <div class="hidden content">Shop</div>
        <div class="visible content">
          <i class="shop icon"></i>
        </div>
      </div>
      <div class="ui animated fade button" tabindex="0">
        <div class="visible content">Sign-up for a Pro account</div>
        <div class="hidden content">每月12.99美元 </div>
      </div>    
  </div>
  <div>
    <button class="ui primary button">Save </button>
    <button class="ui button">Discard </button>
    <button class="ui secondary button">Okay </button>
  </div>


  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--  <script src="semantic/dist/semantic.min.js"></script> -->
</body>
</html>